<template>
	<div class="wallet-container">
		<!-- Header部分 -->
		<header class="wallet-header">
			<div class="header-content">
				<img :src="user.userImg" alt="用户头像">
				<h3>{{ user.userId }}<br>{{ user.userName }}</h3>
			</div>
		</header>

		<!-- 钱包信息部分 -->
		<div class="wallet-info">
			<div>
				<h1>钱包收支明细</h1>
				<div>
					<ul class="order">
						<li v-for="item in transitionArr">
							<div class="order-info">
								<p>
									{{item.transition_id}}
									{{item.transition_time}} {{transitionType(item.transition_type)}} {{transitionToken(item)}}{{item.transition_amount}}
									<i v-if="item.transition_type==2" class="fa fa-caret-down" @click="detailetShow(item)"></i>
								</p>
							</div>
							<p v-show="item.isShowDetailet">{{other(item)}}</p>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import Footer from '../components/Footer.vue';
	import axios from 'axios';
	import qs from 'qs';

	export default {
		name: 'Transition',
		setup() {
			const user = ref({});
			const transitionArr = ref([]);
			const {proxy}=getCurrentInstance();
			const transitionType =(type) => {
				if (type == 2) {
					return "支付";
				} else if (type == 1) {
					return "充值";
				} else if(type==0){
					return "提现";
				} else if(type==3){
					return "充值奖励";
				}
			};
			const detailetShow = (transition) => {
				transition.isShowDetailet = !transition.isShowDetailet;
			};
			const transitionToken = (item) => {
				if ((item.transition_type == 2&&item.user_id_in==user.value.userId)||item.transition_type==1||item.transition_type==3) {
					return "+";
				} else {
					return "-";
				}
			};
			const other = (item) => {
				if (item.user_id_in==user.value.userId) {
					return item.user_id_out;
				} else {
					return item.user_id_in;
				}
			};

			onMounted( async() => {
				user.value = proxy.$getSessionStorage('user');
				const response = await axios.get(`WalletController/listTransitionsById/${user.value.userId}`, qs.stringify())
				.then(response => {
					let result = response.data;
					result.forEach(transition => {
						transition.isShowDetailet = false;
					});
					transitionArr.value = result;
					console.log(transitionArr);
				}).catch(error => {
					console.error(error);
				});
			});

			return {
				user,
				transitionArr,
				transitionType,
				transitionToken,
				other,
				detailetShow
			};
		},
		components: {
			Footer
		}
	};
</script>

<style scoped>
	.wallet-container {
		font-family: Arial, sans-serif;
	}

	.wallet-header {
		background-color: #0097ff;
		color: white;
		padding: 20px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		position: static;
	}

	.header-content {
		display: flex;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
		/* 允许子元素换行 */
	}

	.header-content img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.header-content h3 {
		margin: 0;
		color: #fff;
		font-size: 20px;
	}

	.wallet-info {
		padding: 20px;
		background-color: #fff;
		margin-top: 80px;
		/* 留出header的空间 */
	}

	.wallet-info h1 {
		margin-top: 0;
	}

	.wallet-info p {
		margin: 5px 0;
		font-size: 16px;
		color: #555;
	}

	.wallet-info strong {
		font-weight: bold;
		color: #007bff;
	}

	button {
		padding: 10px 20px;
		font-size: 16px;
		color: #fff;
		background-color: #007bff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	button:hover {
		background-color: #0056b3;
	}

	/* 底部菜单样式 */
	.footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		list-style: none;
		margin: 0;
		padding: 0;
	}
</style>